/* Original: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */ /** * Reset Style & Font Size Declaration * Updated: 2009-09-15 * Modified: Suchin Prasongbundit */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border: 0; font-family: inherit; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } :focus { outline: 0; } body { background: white; color: black; line-height: 1; } ol,ul { list-style: none; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: separate; border-spacing: 0; } caption, th, td { font-weight: normal; text-align: left; } blockquote:before, blockquote:after, q:before, q:after { content:""; } blockquote, q { quotes: "" ""; } img { border:0; } /* Font Size Declaration */ body { font-family: Lucida Grande, Lucida Sans Unicode, Thonburi, Microsoft Sans Serif, Tahoma, sans-serif;} html { font-size:100.01%; } /* for IE */ body { font-size: 62.5%;} table { font-size: inherit; } select, input, textarea { font: 1em Lucida Grande, Lucida Sans Unicode, Thonburi, Microsoft Sans Serif, Tahoma, helvetica, clean, sans-serif;} pre, code {font:1em monospace;} body * {line-height:1.22em;} a {color:navy; text-decoration:underline;} a:hover {color:#f00; text-decoration:none;} a:visited {color:navy;} strong { font-weight: bold;} em { font-style: italic;} strong, em, b, i { font-family: Lucida Sans; } h1, h2, h3, h4, h5, h6 { font-family: Lucida Sans; } /* This part from grid960 */ hr {border: 0 #ccc solid; border-top-width: 1px; clear: both; height: 0;} h1 {font-size: 25px;} h2 {font-size: 23px;} h3 {font-size: 21px;} h4 {font-size: 19px;} h5 {font-size: 17px;} h6 {font-size: 15px;} ol {list-style: decimal;} ul {list-style: square;} li {margin-left: 30px;} p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset {margin-bottom: 20px;}/** * Base Style 2.0 * Updated: 2010-04-04 * Author: Suchin Prasongbundit */ .hide {display:none;} .show {display:block;} .invisible {visibility:hidden;} .visible {visibility:visible;} .inline {display:inline;} .seperator6 { height: 6px;} .seperator8 { height: 8px;} .seperator12 { height: 12px;} .seperator16 { height: 16px;} .seperator24 { height: 24px;} .seperator32 { height: 32px;} #dimOverlay { background: #000; position: absolute; top: 0px; left: 0px; z-index: 99;} #base-loading { background: url(../jstep/assets/images/smoke1.png) no-repeat; color: #fff; display: block; font-size: 0.9em; height: 75px; position: absolute; width: 300px; z-index: 100; opacity: .9; left: 0px; top: 0px; } .base-loading { background: url(../jstep/assets/images/loader/loader01.gif) no-repeat center 35%; display: block; font-weight: bold; width: 300px; height: 75px; text-indent: 20px; padding-top: 16px; } .base-alert,.base-info,.base-error,.base-success, .base-smoke { color: #494949; cursor: pointer; font-size: 2.0em; font-weight: bold; margin: 5px auto; padding: 7px 20px 7px 45px; text-align: left; position: absolute; z-index: 100; left: 0; top: 0; width: 600px; } .base-alert { background: #fff6bf url(../jstep/assets/images/knob-32/attention.png) no-repeat 10px 50%; border-bottom: 2px solid #ffd324; border-top: 2px solid #ffd324; color: #a0971e; } .base-info { background: #cef2f5 url(../jstep/assets/images/knob-32/info.png) no-repeat 10px 50%; border-bottom: 2px solid #69dcf5; border-top: 2px solid #69dcf5; color: #00529b;} .base-error { background: #ffbaba url(../jstep/assets/images/knob-32/cancel.png) no-repeat 10px 50%; border-bottom: 2px solid #d8000c; border-top: 2px solid #d8000c; color: #d8000c;} .base-success { background: #dff2bf url(../jstep/assets/images/knob-32/valid_green.png) no-repeat; background-position: 10px 50%; border-bottom: 2px solid #4f8a10; border-top: 2px solid #4f8a10; color: #4f8a10;} .base-smoke { background: #000; color: #fff; -moz-border-radius: 10px; -webkit-border-radius: 5px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); width: 300px; } .base-close { background: url(../jstep/assets/images/close1.png) no-repeat; display: block; height: 28px; position: absolute; text-indent: -7000px; width: 28px; left: -10px; top: -10px; } .fb-alert { background: url(../jstep/assets/images/knob-32/attention.png) no-repeat left top; display: block; float: left; height: 32px; width: 34px; } .fb-info { background: url(../jstep/assets/images/knob-32/info.png) no-repeat left top; display: block; float: left; height: 32px; width: 34px; } .fb-error { background: url(../jstep/assets/images/knob-32/cancel.png) no-repeat left top; display: block; float: left; height: 32px; width: 34px; } .fb-success { background: url(../jstep/assets/images/knob-32/valid_green.png) no-repeat left top; display: block; float: left; height: 32px; width: 34px; } .fb-content { font-size: 1.2em; } /* inspire from ie6update */ #ie6update { background: #ffffe1 url(../jstep/assets/images/ie6update/icon.png) no-repeat 8px center; border-bottom: 1px solid #666; display: block; font-size: 14px; position: absolute; left: 0px; padding: 8px 16px 8px 32px; top: 0px; z-index: 100; height: 24px; } #ie6update a { color: #00f; } /* inspire from imagezoom */ .shadow .tl, .shadow .tr, .shadow .bl, .shadow .br { width: 42px; height: 42px; position: absolute; background-repeat: no-repeat; background-color: transparent; } .shadow .tl { background-image: url(../jstep/assets/images/shadow_tl.png) !important; background-image: none; background-position: top left; top: -43px; left: -43px; } .shadow .tr { background-image: url(../jstep/assets/images/shadow_tr.png) !important; background-image: none; background-position: top right; top: -43px; right: -41px; } .shadow .bl { background-image: url(../jstep/assets/images/shadow_bl.png) !important; background-image: none; background-position: bottom left; bottom: -41px; left: -43px; } .shadow .br { background-image: url(../jstep/assets/images/shadow_br.png) !important; background-image: none; background-position: bottom right; bottom: -41px; right: -41px; } .shadow .top, .shadow .bottom { width: 100%; height: 42px; background-color: transparent; background-repeat: repeat-x; position: absolute; left: -1px; } .shadow .top { top: -42px; background-image: url(../jstep/assets/images/shadow_top.png) !important; background-image: none; background-position: top left; } .shadow .bottom { bottom: -39px; background-image: url(../jstep/assets/images/shadow_bottom.png) !important; background-image: none; background-position: bottom left; } .shadow .left, .shadow .right { width: 42px; height: 100%; background-color: transparent; background-repeat: repeat-y; position: absolute; top: -1px; } .shadow .left { left: -42px; background-image: url(../jstep/assets/images/shadow_left.png) !important; background-image: none; background-position: top left; } .shadow .right { right: -39px; background-image: url(../jstep/assets/images/shadow_right.png) !important; background-image: none; background-position: top right; } /* shadow2 */ .shadow2 .tl, .shadow2 .tr, .shadow2 .bl, .shadow2 .br { width: 20px; height: 20px; position: absolute; background-repeat: no-repeat; background-color: transparent; } .shadow2 .tl { background-image: url(../jstep/assets/images/shadow2_tl.png) !important; background-position: top left; top: -20px; left: -20px; } .shadow2 .tr { background-image: url(../jstep/assets/images/shadow2_tr.png) !important; background-position: top right; top: -20px; right: -20px; } .shadow2 .bl { background-image: url(../jstep/assets/images/shadow2_bl.png) !important; background-position: bottom left; bottom: -20px; left: -20px; } .shadow2 .br { background-image: url(../jstep/assets/images/shadow2_br.png) !important; background-position: bottom right; bottom: -20px; right: -20px; } .shadow2 .top, .shadow2 .bottom { width: 100%; height: 20px; background-color: transparent; background-repeat: repeat-x; position: absolute; left: -0px; } .shadow2 .top { top: -20px; background-image: url(../jstep/assets/images/shadow2_top.png) !important; background-position: top left; } .shadow2 .bottom { bottom: -20px; background-image: url(../jstep/assets/images/shadow2_bottom.png) !important; background-position: bottom left; } .shadow2 .left, .shadow2 .right { width: 20px; height: 100%; background-color: transparent; background-repeat: repeat-y; position: absolute; top: -0px; } .shadow2 .left { left: -20px; background-image: url(../jstep/assets/images/shadow2_left.png) !important; background-position: top left; } .shadow2 .right { right: -20px; background-image: url(../jstep/assets/images/shadow2_right.png) !important; background-position: top right; } /** * Style 2.0 * Updated: 2010-07-29 * Author: Suchin Prasongbundit */ /** * Form */ fieldset { background: #fff; border: 1px solid #c8c8c8; margin: 0; padding: 8px; } fieldset legend { background: #dedede; border: 1px solid #c8c8c8; font-size: 1.4em; font-weight: bold; margin: 0 0 0px 0px; padding: 4px 8px; } fieldset ul { list-style: none; margin: 4px; padding: 0; } fieldset li { margin: 12px; padding: 0; clear:both;} fieldset input, fieldset textarea { background: #fff; border: 2px solid #ccc; font-size: 1.4em; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; padding: 4px; } fieldset input:focus, fieldset textarea:focus { border: 2px solid #b4baff; } fieldset select { font-size: 1.4em; } fieldset label { background: #dedede; border: 1px solid #c8c8c8; color: #000; display: block; font-size: 1.3em;margin: 0; padding: 4px 8px; } fieldset label em { color: #ff1515; } fieldset .embed-hint { display: block; float: left; position: relative; } fieldset .embed-hint cite { color: #999; cursor: text; display: inline; font-size: 1.4em; left: 8px; position: absolute; top: 33px; } /** * Table from: http://veerle.duoh.com/blog/comments/a_css_styled_table/ */ table.default-style { border-collapse:collapse; color: #4f6b72; font-size: 1.3em; margin: 0 auto; padding: 0; } table.default-style a { color: #4f6b72; text-decoration: underline; } table.default-style a:hover { color: #a00; } .default-style caption { color: #4f6b72; font-size: 1.1em; font-style: italic; padding: 4px; text-align: right; } .default-style th { background: #cae8ea url(../jstep/assets/images/table-header.jpg) repeat-x; border: 1px solid #c1dad7; border-bottom: none; color: #4f6b72; font-size: 1.1em; font-weight: bold; letter-spacing: 2px; padding: 6px 6px 6px 12px; text-align: left; } .default-style td { background: #fff; border: 1px solid #c1dad7; color: #4f6b72; padding: 6px 6px 6px 12px; } .default-style th.check { margin: 0 auto; text-align: center; width: 16px; } .default-style td.even { background: #f5fafa; color: #797268; } .default-style th.odd, th.even { border-bottom: 1px solid #c1dad7; border-top: 0; letter-spacing: normal; } .default-style th.odd { background: #fff url(../jstep/assets/images/table-bullet1.gif) no-repeat; } .default-style th.even { background: #f5fafa url(../jstep/assets/images/table-bullet2.gif) no-repeat; color: #797268; } /** * Toolbar Background & Link / Button use Sexybuttons */ .toolbar { background: url(../jstep/assets/images/bg/bg-toolbar03.png) repeat-x left top; display: block; font-size: 1.0em; height: 70px; margin: 4px auto 12px; } .toolbar h1 { color: #000; display: block; font-size: 1.6em; font-weight: bold; line-height: 34px; margin: 0 16px; } .toolbar ul { clear: both; list-style: none; margin: 0px 8px; text-align: right; } .toolbar li { display: inline; margin: 0 4px;} .toolbar a { color: #700;/*#1c4257;*/ font-size: 1.4em; text-decoration: underline; } .toolbar a:hover { text-decoration: none; } /** * Pagination */ .pagination { clear: both; margin: 8px auto; width: 98%; } .pagination ul { list-style-type: none; margin: 0; padding: 0; } .pagination li { display: inline; margin: 0 1px; } .pagination li a { background: #deeff7; border: 1px solid #0073bd; color: #003152; font-weight: bold; padding: 2px 6px; text-decoration: none; } .pagination li a:hover { background: #fff6bf; border: 1px solid #ffd324; color: #000; } .pagination li a.page-active { background: #003152; color: #fff; }.container_12,.container_16{margin-left:auto;margin-right:auto;width:960px}.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12,.grid_13,.grid_14,.grid_15,.grid_16{display:inline;float:left;margin-left:10px;margin-right:10px}.container_12 .grid_3,.container_16 .grid_4{width:220px}.container_12 .grid_6,.container_16 .grid_8{width:460px}.container_12 .grid_9,.container_16 .grid_12{width:700px}.container_12 .grid_12,.container_16 .grid_16{width:940px}.alpha{margin-left:0}.omega{margin-right:0}.container_12 .grid_1{width:60px}.container_12 .grid_2{width:140px}.container_12 .grid_4{width:300px}.container_12 .grid_5{width:380px}.container_12 .grid_7{width:540px}.container_12 .grid_8{width:620px}.container_12 .grid_10{width:780px}.container_12 .grid_11{width:860px}.container_16 .grid_1{width:40px}.container_16 .grid_2{width:100px}.container_16 .grid_3{width:160px}.container_16 .grid_5{width:280px}.container_16 .grid_6{width:340px}.container_16 .grid_7{width:400px}.container_16 .grid_9{width:520px}.container_16 .grid_10{width:580px}.container_16 .grid_11{width:640px}.container_16 .grid_13{width:760px}.container_16 .grid_14{width:820px}.container_16 .grid_15{width:880px}.container_12 .prefix_3,.container_16 .prefix_4{padding-left:240px}.container_12 .prefix_6,.container_16 .prefix_8{padding-left:480px}.container_12 .prefix_9,.container_16 .prefix_12{padding-left:720px}.container_12 .prefix_1{padding-left:80px}.container_12 .prefix_2{padding-left:160px}.container_12 .prefix_4{padding-left:320px}.container_12 .prefix_5{padding-left:400px}.container_12 .prefix_7{padding-left:560px}.container_12 .prefix_8{padding-left:640px}.container_12 .prefix_10{padding-left:800px}.container_12 .prefix_11{padding-left:880px}.container_16 .prefix_1{padding-left:60px}.container_16 .prefix_2{padding-left:120px}.container_16 .prefix_3{padding-left:180px}.container_16 .prefix_5{padding-left:300px}.container_16 .prefix_6{padding-left:360px}.container_16 .prefix_7{padding-left:420px}.container_16 .prefix_9{padding-left:540px}.container_16 .prefix_10{padding-left:600px}.container_16 .prefix_11{padding-left:660px}.container_16 .prefix_13{padding-left:780px}.container_16 .prefix_14{padding-left:840px}.container_16 .prefix_15{padding-left:900px}.container_12 .suffix_3,.container_16 .suffix_4{padding-right:240px}.container_12 .suffix_6,.container_16 .suffix_8{padding-right:480px}.container_12 .suffix_9,.container_16 .suffix_12{padding-right:720px}.container_12 .suffix_1{padding-right:80px}.container_12 .suffix_2{padding-right:160px}.container_12 .suffix_4{padding-right:320px}.container_12 .suffix_5{padding-right:400px}.container_12 .suffix_7{padding-right:560px}.container_12 .suffix_8{padding-right:640px}.container_12 .suffix_10{padding-right:800px}.container_12 .suffix_11{padding-right:880px}.container_16 .suffix_1{padding-right:60px}.container_16 .suffix_2{padding-right:120px}.container_16 .suffix_3{padding-right:180px}.container_16 .suffix_5{padding-right:300px}.container_16 .suffix_6{padding-right:360px}.container_16 .suffix_7{padding-right:420px}.container_16 .suffix_9{padding-right:540px}.container_16 .suffix_10{padding-right:600px}.container_16 .suffix_11{padding-right:660px}.container_16 .suffix_13{padding-right:780px}.container_16 .suffix_14{padding-right:840px}.container_16 .suffix_15{padding-right:900px}.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}.clearfix{display:inline-block}* html .clearfix{height:1%}.clearfix{display:block}/** * SqueezeBox - Expandable Lightbox * * Allows to open various content as modal, * centered and animated box. * * @version 1.1 rc4 * * @license MIT-style license * @author Harald Kirschner * @copyright Author */ #sbox-overlay { position: absolute; background-color: #000; left: 0px; top: 0px; zoom: 1; } #sbox-window { position: absolute; background-color: #fff; text-align: left; overflow: visible; padding: 10px; /* invalid values, but looks smoother! */ -moz-border-radius: 3px; -webkit-border-radius: 3px; } #sbox-btn-close { position: absolute; width: 30px; height: 30px; right: -15px; top: -15px; background: url(../jstep/3rdparty/squeezebox/assets/closebox.png) no-repeat center; border: none; } .sbox-window-ie6 #sbox-btn-close { background-image: url(../jstep/3rdparty/squeezebox/assets/closebox.gif); } .sbox-loading #sbox-content { background-image: url(../jstep/3rdparty/squeezebox/assets/spinner.gif); background-repeat: no-repeat; background-position: center; } #sbox-content { clear: both; overflow: auto; background-color: #fff; height: 100%; width: 100%; } .sbox-content-image#sbox-content { overflow: visible; } #sbox-image { display: block; } .sbox-content-image img { display: block; width: 100%; height: 100%; } .sbox-content-iframe#sbox-content { overflow: visible; } /* Hides scrollbars */ .body-overlayed { overflow: hidden; } /* Hides flash (Firefox problem) and selects (IE) */ .body-overlayed embed, .body-overlayed object, .body-overlayed select { visibility: hidden; } #sbox-window embed, #sbox-window object, #sbox-window select { visibility: visible; } /* Shadows */ .sbox-bg { position: absolute; width: 33px; height: 40px; } .sbox-bg-n { left: 0; top: -40px; width: 100%; background: url(../jstep/3rdparty/squeezebox/assets/bg_n.png) repeat-x; } .sbox-bg-ne { right: -33px; top: -40px; background: url(../jstep/3rdparty/squeezebox/assets/bg_ne.png) no-repeat; } .sbox-bg-e { right: -33px; top: 0; height: 100%; background: url(../jstep/3rdparty/squeezebox/assets/bg_e.png) repeat-y; } .sbox-bg-se { right: -33px; bottom: -40px; background: url(../jstep/3rdparty/squeezebox/assets/bg_se.png) no-repeat; } .sbox-bg-s { left: 0; bottom: -40px; width: 100%; background: url(../jstep/3rdparty/squeezebox/assets/bg_s.png) repeat-x; } .sbox-bg-sw { left: -33px; bottom: -40px; background: url(../jstep/3rdparty/squeezebox/assets/bg_sw.png) no-repeat; } .sbox-bg-w { left: -33px; top: 0; height: 100%; background: url(../jstep/3rdparty/squeezebox/assets/bg_w.png) repeat-y; } .sbox-bg-nw { left: -33px; top: -40px; background: url(../jstep/3rdparty/squeezebox/assets/bg_nw.png) no-repeat; }#imagezoom_overlay { position: absolute; top: 0px; left: 0px; z-index: 9999996; } .imagezoom { background-color: #fff; border: 1px solid #585858; margin: -5px; padding: 4px; z-index: 9999997; } .imagezoom .loading { width: 32px; height: 32px; position: absolute; top: 50%; left: 50%; margin-top: -16px; margin-left: -16px; } .imagezoom .image { position: relative; z-index: 25; display: block; } .imagezoom .close { width: 30px; height: 30px; background-image: url(../jstep/3rdparty/imagezoom/images/closebox.png) !important; background-image: url(../jstep/3rdparty/imagezoom/images/closebox.gif); background-position: top left; background-repeat: no-repeat; background-color: transparent; cursor: pointer; position: absolute; top: -15px; right: -15px; z-index: 30; } .imagezoom .close span { display: none; } .imagezoom .caption { margin: 0px 0px; margin-top: -30px; color: #fff; font-size: 12px; text-align: center; height: 30px; background-image: url(../jstep/3rdparty/imagezoom/images/caption.png); background-repeat: repeat-x; background-color: transparent; background-position: bottom left; position: relative; z-index: 30; } .imagezoom .caption p { margin: 0px; line-height: 22px; height: 30px; vertical-align: middle; position: absolute; top: 0px; left: 0px; width: 100%; text-align: center; } .imagezoom .caption .previous, .imagezoom .caption .next { display: block; width: 22px; height: 22px; position: absolute; top: 50%; margin-top: -11px; left: 18px; cursor: pointer; background-image: url(../jstep/3rdparty/imagezoom/images/prev.png) !important; background-image: url(../jstep/3rdparty/imagezoom/images/prev.gif); } .imagezoom .caption .next { left: auto; right: 18px; background-image: url(../jstep/3rdparty/imagezoom/images/next.png) !important; background-image: url(../jstep/3rdparty/imagezoom/images/next.gif); } /** Shadows **/ .imagezoom .s_tl, .imagezoom .s_tr, .imagezoom .s_bl, .imagezoom .s_br { width: 13px; height: 18px; position: absolute; background-repeat: no-repeat; background-color: transparent; } .imagezoom .s_tl { background-image: url(../jstep/3rdparty/imagezoom/images/shadow_tl.png) !important; background-image: none; background-position: top left; top: -19px; left: -14px; } .imagezoom .s_tr { background-image: url(../jstep/3rdparty/imagezoom/images/shadow_tr.png) !important; background-image: none; background-position: top right; top: -19px; right: -14px; } .imagezoom .s_bl { background-image: url(../jstep/3rdparty/imagezoom/images/shadow_bl.png) !important; background-image: none; background-position: bottom left; bottom: -19px; left: -14px; } .imagezoom .s_br { background-image: url(../jstep/3rdparty/imagezoom/images/shadow_br.png) !important; background-image: none; background-position: bottom right; bottom: -19px; right: -14px; } .imagezoom .s_top, .imagezoom .s_bottom { width: 100%; height: 18px; background-color: transparent; background-repeat: repeat-x; position: absolute; left: -1px; } .imagezoom .s_top { top: -18px; background-image: url(../jstep/3rdparty/imagezoom/images/shadow_top.png) !important; background-image: none; background-position: top left; } .imagezoom .s_bottom { bottom: -18px; background-image: url(../jstep/3rdparty/imagezoom/images/shadow_bottom.png) !important; background-image: none; background-position: bottom left; } .imagezoom .s_left, .imagezoom .s_right { width: 13px; height: 100%; background-color: transparent; background-repeat: repeat-y; position: absolute; top: -1px; } .imagezoom .s_left { left: -13px; background-image: url(../jstep/3rdparty/imagezoom/images/shadow_left.png) !important; background-image: none; background-position: top left; } .imagezoom .s_right { right: -13px; background-image: url(../jstep/3rdparty/imagezoom/images/shadow_right.png) !important; background-image: none; background-position: top right; }/* * Sexy Buttons * * DESCRIPTION: * Sexy, skinnable HTML/CSS buttons with icons. * * PROJECT URL: * http://code.google.com/p/sexybuttons/ * * AUTHOR: * Richard Davies * http://www.richarddavies.us * Richard@richarddavies.us * * VERSION: * 1.1 * * LICENSE: * Apache License 2.0 (http://www.apache.org/licenses/LICENSE-2.0) * Creative Commons 3.0 Attribution (http://creativecommons.org/licenses/by/3.0/) * * CREDITS: * Inspired by, derived from, and thanks to: * http://www.p51labs.com/simply-buttons-v2/ * http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html * http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba * http://www.elctech.com/snippets/make-your-buttons-look-super-awesome * * USAGE: * Simply add class="sexybutton [skin]" to a */ /* * Generic styles for all Sexy Buttons */ .sexybutton { display: inline-block; margin: 0; padding: 0; font: bold 13px "Helvetica Neue", Helvetica, Arial, clean, sans-serif !important; text-decoration: none !important; text-shadow: 1px 1px 2px rgba(0,0,0,0.20); background: none; border: none; white-space: nowrap; cursor: pointer; user-select: none; -moz-user-select: none; /* Fix extra width padding in IE */ _width: 0; overflow: visible; } .sexybutton span { display: block; /* Prevents :active from working in IE--oh well! */ height: 24px; padding-right: 12px; background-repeat: no-repeat; background-position: right top; } .sexybutton span span { padding-right: 0; padding-left: 12px; line-height: 24px; background-position: left top; } .sexybutton span span span { padding-left: 21px; background-image: none; background-repeat: no-repeat; background-position: left center; /* IE6 still requires a PNG transparency fix */ /* _background-image: none; Or just hide icons from the undeserving IE6 */ /* _padding-left: 0; Or just hide icons from the undeserving IE6 */ } .sexybutton span span span.after { padding-left: 0px; padding-right: 21px; background-position: right center; /* IE6 still requires a PNG transparency fix */ /* _padding-right: 0; Or just hide icons from the undeserving IE6 */ } .sexybutton[disabled], .sexybutton[disabled]:hover, .sexybutton[disabled]:focus, .sexybutton[disabled]:active, .sexybutton.disabled, .sexybutton.disabled:hover, .sexybutton.disabled:focus, .sexybutton.disabled:active { color: #333 !important; cursor: inherit; text-shadow: none; opacity: 0.33; } .sexybutton:hover span, .sexybutton:focus span { background-position: 100% -24px; } .sexybutton:hover span span, .sexybutton:focus span span { background-position: 0% -24px; } .sexybutton:active span { background-position: 100% -48px; } .sexybutton:active span span { background-position: 0% -48px; } .sexybutton[disabled] span, .sexybutton.disabled span { background-position: 100% -72px; } .sexybutton[disabled] span span, .sexybutton.disabled span span { background-position: 0% -72px; } .sexybutton:hover span span span, .sexybutton:focus span span span, .sexybutton:active span span span, .sexybutton[disabled] span span span, .sexybutton.disabled span span span { background-position: left center; } .sexybutton:hover span span span.after, .sexybutton:focus span span span.after, .sexybutton:active span span span.after, .sexybutton[disabled] span span span.after, .sexybutton.disabled span span span.after { background-position: right center; } .sexybutton img { margin-right: 5px; vertical-align: text-top; /* IE6 Hack */ _margin-top: 4px; _vertical-align: text-bottom; /* IE6 still requires a PNG transparency fix */ /* _display: none; Or just hide icons from the undeserving IE6 */ } .sexybutton img.after { margin-right: 0; margin-left: 5px; /* IE6 still requires a PNG transparency fix */ /* _margin-left: 0; Or just hide icons from the undeserving IE6 */ } .sexybutton.sexymedium { font-size: 15px !important; } .sexybutton.sexylarge { font-size: 18px !important; } /* * Button Skins * * .PNG background images with alpha transparency are also supplied if you'd rather use them instead of the * default .GIF images. (Just beware of IE6's lack of support.) * * Additional skins can be added below. The ../jstep/3rdparty/sexybuttons/images/skins/ButtonTemplate.psd can be used to create new skins. * Prefix the skin name with "sexy" to avoid any potential conflicts with other class names. */ /* Silver Button Skin (the default skin) */ .sexybutton, .sexybutton.sexysilver { color: #666 !important; } .sexybutton:hover, .sexybutton:focus, .sexybutton.sexysilver:hover, .sexybutton.sexysilver:focus { color: #333 !important; } .sexybutton span, .sexybutton.sexysilver span { background-image: url(../jstep/3rdparty/sexybuttons/images/skins/silver/button_right.gif); } .sexybutton span span, .sexybutton.sexysilver span span { background-image: url(../jstep/3rdparty/sexybuttons/images/skins/silver/button_left.gif); } /* Orange Button Skin */ .sexybutton.sexyorange, .sexybutton.sexyorange:hover, .sexybutton.sexyorange:focus { color: white !important; } .sexybutton.sexyorange[disabled], .sexybutton.sexyorange[disabled]:hover, .sexybutton.sexyorange[disabled]:active, .sexybutton.sexyorange[disabled]:focus, .sexybutton.sexyorange.disabled, .sexybutton.sexyorange.disabled:hover, .sexybutton.sexyorange.disabled:active, .sexybutton.sexyorange.disabled:focus { color: #333 !important; } .sexybutton.sexyorange span { background-image: url(../jstep/3rdparty/sexybuttons/images/skins/orange/button_right.gif); } .sexybutton.sexyorange span span { background-image: url(../jstep/3rdparty/sexybuttons/images/skins/orange/button_left.gif); } /* Yellow Button Skin */ .sexybutton.sexyyellow, .sexybutton.sexyyellow:hover, .sexybutton.sexyyellow:focus { color: #994800 !important; } .sexybutton.sexyyellow span { background-image: url(../jstep/3rdparty/sexybuttons/images/skins/yellow/button_right.gif); } .sexybutton.sexyyellow span span { background-image: url(../jstep/3rdparty/sexybuttons/images/skins/yellow/button_left.gif); } /* * Simple Skin Buttons */ .sexybutton.sexysimple { position: relative; padding: 5px 10px 5px; font: inherit; font-size: 13px !important; font-style: normal !important; font-weight: bold !important; color: #fff !important; line-height: 1; background-image: url(../jstep/3rdparty/sexybuttons/images/skins/simple/awesome-overlay-sprite.png); background-repeat: repeat-x; background-position: 0 0; /* Special effects */ text-shadow: 0 -1px 1px rgba(0,0,0,0.25), -2px 0 1px rgba(0,0,0,0.25); border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5); /* IE only stuff */ border-bottom: 1px solid transparent\9; _background-image: none; /* Cross browser inline block hack - http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/ */ display: -moz-inline-stack; display: inline-block; vertical-align: middle; *display: inline !important; position: relative; /* Force hasLayout in IE */ zoom: 1; /* Disable text selection (Firefox only)*/ -moz-user-select: none; } .sexybutton.sexysimple::selection { background: transparent; } .sexybutton.sexysimple:hover, .sexybutton.sexysimple:focus { background-position: 0 -50px; color: #fff !important; } .sexybutton.sexysimple:active { background-position: 0 -100px; -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.7); /* Unfortunately, Safari doesn't support inset yet */ -webkit-box-shadow: none; /* IE only stuff */ border-bottom: 0\9; border-top: 1px solid #666\9; } .sexybutton.sexysimple[disabled], .sexybutton.sexysimple.disabled { background-position: 0 -150px; color: #333 !important; text-shadow: none; } .sexybutton.sexysimple[disabled]:hover, .sexybutton.sexysimple[disabled]:focus, .sexybutton.sexysimple[disabled]:active, .sexybutton.sexysimple.disabled:hover, .sexybutton.sexysimple.disabled:focus, .sexybutton.sexysimple.disabled:active { -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5); } .sexybutton.sexysimple span { height: auto; padding-left: 24px; padding-right: 0; background-position: left center; background-repeat: no-repeat; /* IE6 still requires a PNG transparency fix */ /* _padding-left: 0; Or just hide icons from the undeserving IE6 */ } .sexybutton.sexysimple span.after { padding-left: 0; padding-right: 24px; background-position: right center; /* IE6 still requires a PNG transparency fix */ /* _padding-right: 0; Or just hide icons from the undeserving IE6 */ } /* Simple button colors */ .sexybutton.sexysimple { background-color: #333; } /* Default */ .sexybutton.sexysimple.sexyblack { background-color: #333; } .sexybutton.sexysimple.sexyred { background-color: #a90118; } .sexybutton.sexysimple.sexyorange { background-color: #ff8a00; } .sexybutton.sexysimple.sexyyellow { background-color: #ffb515; } .sexybutton.sexysimple.sexygreen { background-color: #59a901; } .sexybutton.sexysimple.sexyblue { background-color: #015ea9; } .sexybutton.sexysimple.sexyteal { background-color: #2daebf; } .sexybutton.sexysimple.sexymagenta { background-color: #a9014b; } .sexybutton.sexysimple.sexypurple { background-color: #9d01a9; } /* Simple button sizes */ .sexybutton.sexysimple.sexysmall { padding: 4px 7px 5px; font-size: 10px !important; } .sexybutton.sexysimple.sexysmall:active { padding: 5px 7px 4px; } .sexybutton.sexysimple { /* default */ } .sexybutton.sexysimple:active { padding: 6px 10px 4px; } .sexybutton.sexysimple.sexymedium { /* default */ } .sexybutton.sexysimple.sexymedium:active { padding: 6px 10px 4px; } .sexybutton.sexysimple.sexylarge { padding: 8px 14px 8px; font-size: 14px !important; } .sexybutton.sexysimple.sexylarge:active { padding: 9px 14px 7px; } .sexybutton.sexysimple.sexyxl { padding: 8px 14px 8px; font-size: 16px !important; } .sexybutton.sexysimple.sexyxl:active { padding: 9px 14px 7px; } .sexybutton.sexysimple.sexyxxl { padding: 8px 14px 8px; font-size: 20px !important; } .sexybutton.sexysimple.sexyxxl:active { padding: 9px 14px 7px; } .sexybutton.sexysimple.sexyxxxl { padding: 8px 14px 8px; font-size: 26px !important; } .sexybutton.sexysimple.sexyxxxl:active { padding: 9px 14px 7px; } .sexybutton.sexysimple.sexysmall[disabled]:active, .sexybutton.sexysimple.sexysmall.disabled:active { padding: 4px 7px 5px; } .sexybutton.sexysimple[disabled]:active, .sexybutton.sexysimple.disabled:active { padding: 5px 10px 5px; } .sexybutton.sexysimple.sexymedium[disabled]:active, .sexybutton.sexysimple.sexymedium.disabled:active { padding: 6px 10px 4px; } .sexybutton.sexysimple.sexylarge[disabled]:active, .sexybutton.sexysimple.sexylarge.disabled:active { padding: 8px 14px 8px; } .sexybutton.sexysimple.sexyxl[disabled]:active, .sexybutton.sexysimple.sexyxl.disabled:active { padding: 8px 14px 8px; } .sexybutton.sexysimple.sexyxxl[disabled]:active, .sexybutton.sexysimple.sexyxxl.disabled:active { padding: 8px 14px 8px; } .sexybutton.sexysimple.sexyxxxl[disabled]:active, .sexybutton.sexysimple.sexyxxxl.disabled:active { padding: 8px 14px 8px; } /* * Icon Definitions */ /* Silk Icons - http://www.famfamfam.com/lab/icons/silk/ */ /* (Obviously not all Silk icons are defined here. Feel free to define any other icons that you may need.) */ .sexybutton span.ok { background-image: url(../jstep/assets/images/silk-16/tick.png) !important; } .sexybutton span.cancel { background-image: url(../jstep/assets/images/silk-16/cross.png) !important; } .sexybutton span.add { background-image: url(../jstep/assets/images/silk-16/add.png) !important; } .sexybutton span.delete { background-image: url(../jstep/assets/images/silk-16/delete.png) !important; } .sexybutton span.download { background-image: url(../jstep/assets/images/silk-16/arrow_down.png) !important; } .sexybutton span.download2 { background-image: url(../jstep/assets/images/silk-16/package_down.png) !important; } .sexybutton span.upload { background-image: url(../jstep/assets/images/silk-16/arrow_up.png) !important; } .sexybutton span.search { background-image: url(../jstep/assets/images/silk-16/magnifier.png) !important; } .sexybutton span.find { background-image: url(../jstep/assets/images/silk-16/find.png) !important; } .sexybutton span.first { background-image: url(../jstep/assets/images/silk-16/resultset_first.png) !important; } .sexybutton span.prev { background-image: url(../jstep/assets/images/silk-16/resultset_previous.png) !important; } .sexybutton span.next { background-image: url(../jstep/assets/images/silk-16/resultset_next.png) !important; } .sexybutton span.last { background-image: url(../jstep/assets/images/silk-16/resultset_last.png) !important; } .sexybutton span.play { background-image: url(../jstep/assets/images/silk-16/play_blue.png) !important; } .sexybutton span.pause { background-image: url(../jstep/assets/images/silk-16/pause_blue.png) !important; } .sexybutton span.rewind { background-image: url(../jstep/assets/images/silk-16/rewind_blue.png) !important; } .sexybutton span.forward { background-image: url(../jstep/assets/images/silk-16/forward_blue.png) !important; } .sexybutton span.stop { background-image: url(../jstep/assets/images/silk-16/stop_blue.png) !important; } .sexybutton span.reload { background-image: url(../jstep/assets/images/silk-16/reload.png) !important; } .sexybutton span.sync { background-image: url(../jstep/assets/images/silk-16/arrow_refresh.png) !important; } .sexybutton span.save { background-image: url(../jstep/assets/images/silk-16/disk.png) !important; } .sexybutton span.email { background-image: url(../jstep/assets/images/silk-16/email.png) !important; } .sexybutton span.print { background-image: url(../jstep/assets/images/silk-16/printer.png) !important; } .sexybutton span.heart { background-image: url(../jstep/assets/images/silk-16/heart.png) !important; } .sexybutton span.like { background-image: url(../jstep/assets/images/silk-16/thumb_up.png) !important; } .sexybutton span.dislike { background-image: url(../jstep/assets/images/silk-16/thumb_down.png) !important; } .sexybutton span.accept { background-image: url(../jstep/assets/images/silk-16/accept.png) !important; } .sexybutton span.decline { background-image: url(../jstep/assets/images/silk-16/decline.png) !important; } .sexybutton span.help { background-image: url(../jstep/assets/images/silk-16/help.png) !important; } .sexybutton span.home { background-image: url(../jstep/assets/images/silk-16/house.png) !important; } .sexybutton span.info { background-image: url(../jstep/assets/images/silk-16/information.png) !important; } .sexybutton span.cut { background-image: url(../jstep/assets/images/silk-16/cut.png) !important; } .sexybutton span.copy { background-image: url(../jstep/assets/images/silk-16/page_white_copy.png) !important; } .sexybutton span.paste { background-image: url(../jstep/assets/images/silk-16/paste_plain.png) !important; } .sexybutton span.erase { background-image: url(../jstep/assets/images/silk-16/erase.png) !important; } .sexybutton span.undo { background-image: url(../jstep/assets/images/silk-16/arrow_undo.png) !important; } .sexybutton span.redo { background-image: url(../jstep/assets/images/silk-16/arrow_redo.png) !important; } .sexybutton span.edit { background-image: url(../jstep/assets/images/silk-16/pencil.png) !important; } .sexybutton span.calendar { background-image: url(../jstep/assets/images/silk-16/date.png) !important; } .sexybutton span.user { background-image: url(../jstep/assets/images/silk-16/user.png) !important; } .sexybutton span.settings { background-image: url(../jstep/assets/images/silk-16/cog.png) !important; } .sexybutton span.cart { background-image: url(../jstep/assets/images/silk-16/cart.png) !important; } .sexybutton span.wand { background-image: url(../jstep/assets/images/silk-16/wand.png) !important; } .sexybutton span.wrench { background-image: url(../jstep/assets/images/silk-16/wrench.png) !important; }